<template>
  <div id="main">
    <div id="" class="card">
      <div style="width: 100%; height: 50px ">
        <!--查询条件-->
        <el-form :inline="true" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
          <el-form-item label="商户名称:">
            <el-input v-model="queryVo.merchantName" placeholder="请输入商户名称"></el-input>
          </el-form-item>
          <el-form-tiem>
            <el-button type="primary" icon="el-icon-search"  @click="query" >搜索</el-button>
          </el-form-tiem>
        </el-form>
      </div>
      <div>
        <div class="page">
          <el-button icon="el-icon-refresh" circle ></el-button>
        </div>
      </div>
      <!--数据表格-->
      <el-table
          :data="StockData"
          style="width: 100%">
        <el-table-column
            prop="merchantName"
            label="商户名称"
            width="160">
        </el-table-column>
        <el-table-column
            prop="merchantImage"
            label="门面图片"
            width="160">
          <template slot-scope="scope">
          </template>
        </el-table-column>
        <el-table-column
            prop="merchantAddr"
            label="商户地址"
            width="160">
        </el-table-column>
        <el-table-column
            prop="orderNum"
            label="商品数量"
            width="160">
        </el-table-column>
        <el-table-column
            prop="totalAmount"
            label="总金额"
            width="160">
        </el-table-column>
        <el-table-column
            prop="22"
            label="操作"
            width="160">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-shopping-cart-full" circle @click="getOne(scope.row.orderId)">生产出库单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页插件-->
      <div id="cell" class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OutOrder",
  data() {
    return {
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
      // 查询条件
      queryVo: {
        merchant: "",
      },
      //商户数据
      merchant:[]
    }
  },
  created(){
    this.query()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.query()
    },
    //查询所有仓库列表
    async query() {
      const {data: res} = await this.$http.post
      (`/merchant/list/${this.currentPage}/${this.pageSize}`, this.queryVo)
      this.StockData = res.list
      this.total = res.total
      console.log(res)
    },
    //添加出库单
    getOne(id){
      sessionStorage.setItem("OutStock",id)
      this.$router.push("/outDetail")
    }
  }
}
</script>

<style >
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-icon svg {
  height: 1em;
  width: 1em;
}
.el-drawer .el-drawer__header span {
  font-size: 17px;
  line-height: 17px;
  color: black !important;
}
.el-drawer .el-drawer__header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ebeef5;
}
</style>